const ado = document.querySelector('#ado')
const on = document.querySelector('#on')
const off = document.querySelector('#off')
const upmusic = document.querySelector('#upmusic')
const nextmusic = document.querySelector('#nextmusic')
var tx = document.querySelector('#center')
const im = document.getElementsByClassName('im')
const a = document.querySelectorAll('a')
const cont = document.querySelector('#cont')
const progresscontainer = document.querySelector('#progresscontainer')
console.log(progresscontainer.style.width)
const progres = document.querySelector('#progres')
const volume = document.querySelector('.volume')
const range = document.querySelector('#volummusic')
const volummusicBox = document.querySelector('#volummusicBox')
volume.onclick = function () {
    volummusicBox.style.display = 'block'
}
volummusicBox.onmouseout = function () {
    volummusicBox.style.display = 'none'
}
function changeVolume() {
    ado.volume = parseFloat(range.value / 100)
    console.log(ado.volume)
}
range.onchange = function () {
    changeVolume()
}
let timetotle = []
//存歌曲路径和歌词文件路径
let musicArry = [
    {
        id: 1,
        gcsrc: './歌词/泡沫.lrc',
        gqsrc: './歌曲/泡沫.mp3'
    },
    {
        id: 2,
        gcsrc: './歌词/消愁.lrc',
        gqsrc: './歌曲/消愁.mp3'
    },
    {
        id: 3,
        gcsrc: './歌词/九九八十一难.lrc',
        gqsrc: './歌曲/九九八十一难.mp3'
    }
]



//切换上一首
upmusic.onclick = function () {

    if (cont.value == 0) {
        cont.value = musicArry.length - 1
        ado.src = musicArry[musicArry.length - 1].gqsrc
        //修改idmusiclist下的歌单列表的a标签字体颜色
        XiugaiAColor()
        bofang()
        getText(musicArry.length - 1)
        tonbu()
        times()

    } else {
        cont.value = parseInt(cont.value) - 1
        //修改idmusiclist下的歌单列表的a标签字体颜色
        XiugaiAColor()
        ado.src = musicArry[parseInt(cont.value)].gqsrc
        bofang()
        getText(parseInt(cont.value))
        tonbu()
        times()
    }
    console.log(cont.value)
}

//切换下一首
nextmusic.onclick = function () {
    if (cont.value == musicArry.length - 1) {
        ado.src = musicArry[0].gqsrc
        cont.value = 0
        //修改idmusiclist下的歌单列表的a标签字体颜色
        XiugaiAColor()
        bofang()
        getText(parseInt(cont.value))
        tonbu()
        times()
    } else {
        cont.value = parseInt(cont.value) + 1
        //修改idmusiclist下的歌单列表的a标签字体颜色
        XiugaiAColor()
        ado.src = musicArry[parseInt(cont.value)].gqsrc
        bofang()
        getText(parseInt(cont.value))
        tonbu()
        times()
    }

}
//开始播放音乐
off.onclick = function () {
    this.style.display = 'none';
    //播放音乐
    ado.play()
    on.style.display = 'block'
}
//关闭音乐
on.onclick = function () {
    this.style.display = 'none';
    //暂停播放
    ado.pause()
    off.style.display = 'block'
}
var lrc = ""
function getLRC() {

    for (let i = 0; i < im.length; i++) {
        //给歌单列表每项歌曲绑定点击播放事件以及切换对应歌词
        im[i].onclick = function () {
            timetotle = []
            cont.value = i
            //修改idmusiclist下的歌单列表的a标签字体颜色
            XiugaiAColor()
            times()
            //重置进度条
            progres.style.width = 0 + 'px'
            //歌词区域重置
            tx.innerHTML = ''
            //音乐进度重置
            ado.currentTime = 0
            //重置歌词区域位置
            tx.style.transform = 'translateY(-' + 0 + 'px)'
            //修改audio的歌曲路径
            ado.src = musicArry[i].gqsrc
            //将暂停键隐藏
            off.style.display = 'none'
            //播放音乐
            ado.play()
            //播放按键显示出来
            on.style.display = 'block'
            //获取歌词
            var ajax = new XMLHttpRequest();
            //获取对应文件中的歌词内容
            ajax.open("GET", musicArry[cont.value].gcsrc);
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    lrc = ajax.responseText;
                    let newlrc = lrc.split("[")
                    for (let i = 0; i < newlrc.length; i++) {
                        let lrcs = newlrc[i].split(']')
                        let time = lrcs[0].split(".")
                        let newTime = time[0].split(":")
                        let tt = newTime[0] * 60 + newTime[1] * 1
                        //console.log(tt)
                        if (lrcs[1]) {
                            timetotle.push(tt)
                            tx.innerHTML += "<p>" + lrcs[1] + "</p>"
                        }
                    }
                }
                console.log(timetotle)
            };
            ajax.send(null);

        }


    }
    //获取对应文件中的歌词内容
    var ajax = new XMLHttpRequest();
    ajax.open("GET", musicArry[0].gcsrc);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            lrc = ajax.responseText;
            let newlrc = lrc.split("[")
            for (let i = 0; i < newlrc.length; i++) {
                let lrcs = newlrc[i].split(']')
                let time = lrcs[0].split(".")
                let newTime = time[0].split(":")
                let tt = newTime[0] * 60 + newTime[1] * 1
                //console.log(tt)
                if (lrcs[1]) {
                    timetotle.push(tt)
                    tx.innerHTML += "<p>" + lrcs[1] + "</p>"
                }
            }
        }
        console.log(timetotle)
    };
    ajax.send(null);

}
getLRC()
//开启定时器
times()
//同步歌曲
tonbu()

function tonbu() {
    console.log(timetotle)
    var n = 0
    let k = 0
    let p = document.getElementsByTagName("p")
    ado.addEventListener('timeupdate', function () {
        console.log(parseInt(this.currentTime))
        if (timetotle[k] == parseInt(this.currentTime)) {
            if (p[k]) {
                for (let i = 0; i < p.length; i++) {
                    p[i].style.cssText = 'color:black;font-size:16px;'
                }
                p[k].style.cssText = 'color:red;font-size:20px;'
                if (timetotle[10 + n] == parseInt(this.currentTime)) {
                    tx.style.transform = 'translateY(-' + n * 20 + 'px)'
                    n++
                }
            }
            k++
        }
    })
}

//从文件中获取歌词
function getText(m) {

    timetotle = []
    var ajax = new XMLHttpRequest();
    //获取对应文件中的歌词内容
    ajax.open("GET", musicArry[m].gcsrc);
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            lrc = ajax.responseText;
            let newlrc = lrc.split("[")
            for (let i = 0; i < newlrc.length; i++) {
                let lrcs = newlrc[i].split(']')
                let time = lrcs[0].split(".")
                let newTime = time[0].split(":")
                let tt = newTime[0] * 60 + newTime[1] * 1
                //console.log(tt)
                if (lrcs[1]) {
                    timetotle.push(tt)
                    tx.innerHTML += "<p>" + lrcs[1] + "</p>"
                }
            }
        }
        console.log(timetotle)
    };
    ajax.send(null);
}


//音乐播放进度条
function times() {
    let time
    clearInterval(time)
    time = setInterval(() => {
        progres.style.width = (ado.currentTime / ado.duration) * parseInt(progresscontainer.style.width) + 'px'
        if (ado.currentTime == ado.duration) {
            clearInterval(time)
            return;
        }
    }, 500)
}

//修改idmusiclist下的歌单列表的a标签字体颜色
function XiugaiAColor() {
    for (let i = 0; i < musicArry.length; i++) {
        if (parseInt(cont.value) != i) {
            a[i].style.color = '#f5f5f5'
        } else {
            a[parseInt(cont.value)].style.color = '#75cf44'
        }
    }
}

//点击切换按键后播放歌曲
function bofang() {
    //歌词区域重置
    tx.innerHTML = ''
    //音乐进度重置
    ado.currentTime = 0
    //重置歌词区域位置
    tx.style.transform = 'translateY(-' + 0 + 'px)'
    //重置进度条
    progres.style.width = 0 + 'px'
    //将暂停键隐藏
    off.style.display = 'none'
    //播放音乐
    ado.play()
    //播放按键显示出来
    on.style.display = 'block'
}
